<template>
  <view class="container">

    <block v-for="(item,index) in dataList"
           :key="item.volunteerId">
      <view class="title-box">{{titleList[index]}}</view>
      <view class="university-box">
        <view class="university-logo">
          <image :src="staticUrl+item.universityBadge"></image>
        </view>
        <view class="university-name-label">
          <view class="university-name"
                style="width:100px;">{{item.universityName}}</view>
          <view class="university-label-box">
            <view class="university-label"
                  v-for="lable in item.universityLabels">{{label.labelName}}</view>
          </view>
        </view>
        <view class="university-num-major">
          <view class="university-num-box">
            <view class="university-num-lable">录取率为</view>
            <view class="university-num">{{item.volunteerProbability}}%</view>
          </view>
          <view class="university-major">{{item.volunteerMajorName}}</view>
        </view>
      </view>
    </block>

  </view>
</template>

<script>
import { myRequest, showToastMsg, staticUrl } from '../../utils'

export default {
  data () {
    return {
      staticUrl: staticUrl,
      dataList: [],
      titleList: ['第一志愿', '第二志愿', '第三志愿', '第四志愿']
    }
  },
  onLoad () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      const that = this

      uni.showLoading({
        title: '加载中'
      })

      let success = function (res) {
        uni.hideLoading()
        if (res.data.code != 20000) {
          return showToastMsg(res.data.message)
        }

        that.dataList = res.data.data
      }

      let param = {
        url: '/volunteer/result',
        data: {}
      }

      myRequest(param, success)
    }

  }
}
</script>

<style>
page {
  background-color: #eeeeee;
}

.container {
  width: 750rpx;
  height: auto;
  padding-top: 20rpx;
}

.title-box {
  font-size: 30rpx;
  color: #282828;
  padding-left: 40rpx;
  font-weight: bold;
  height: 70rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.university-box {
  display: flex;
  flex-direction: row;
  background-color: #ffffff;
  height: 180rpx;
  padding-left: 40rpx;
}

.university-logo {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.university-logo image {
  width: 130rpx;
  height: 130rpx;
}

.university-name-label {
  padding-left: 20rpx;
}

.university-name {
  font-size: 30rpx;
  color: #333333;
  margin-top: 40rpx;
}

.university-label-box {
  display: flex;
  flex-direction: row;
  margin-top: 14rpx;
}

.university-label {
  font-size: 20rpx;
  color: #999999;
  border: solid 1rpx #f5f5f5;
  margin-right: 8rpx;
  padding-left: 12rpx;
  padding-right: 12rpx;
  padding-top: 2rpx;
  padding-bottom: 3rpx;
}

.university-num-major {
  padding-left: 130rpx;
}

.university-num-box {
  display: flex;
  flex-direction: row;
  margin-top: 40rpx;
  align-items: flex-end;
}

.university-num-lable {
  font-size: 24rpx;
  color: #999999;
  margin-bottom: 4rpx;
}

.university-num {
  font-size: 30rpx;
  color: #f40d29;
}

.university-success-num {
  font-size: 30rpx;
  color: #0bc65e;
}

.university-major {
  font-size: 22rpx;
  color: #666666;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 20rpx;
}
</style>
